import { Fragment, FC, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setUserInfo } from '@/redux/modules/user';
import { UserInfo } from '@/apis/user';
import './index.less';

const UserInfoComp: FC<{}> = () => {
  const info = useSelector((state: any) => state.user);
  const { userName } = info;
  const dispatch = useDispatch();
  useEffect(() => {
    if (info.isLogin) {
      getUserInfo();
    }
  }, [info.isLogin]);
  const getUserInfo = () => {
    UserInfo().then((res) => {
      const { id, name } = res.data;
      dispatch(setUserInfo({ userId: id, userName: name }));
    });
  };
  return (
    <Fragment>
      <div className="userinfo-view">
        <div className="avatar">{userName[0]}</div>
        <div className="user-name">{userName}</div>
      </div>
    </Fragment>
  );
};

export default UserInfoComp;
